<template>
  <div class="page">
    <div class="title">
      <div>消费活跃地统计</div>
      <k-button class="top-btn" value="本月" @click.native="clickMonth" />
      <k-button
        class="top-btn"
        value="近六个月"
        @click.native="clickSixMonths"
      />
      <span class="filter-title filter-item">日期时间</span>
      <k-date-picker
        v-model="timeValue"
        class="filter-item right-item"
        @hqchang="$refs.hqSearchDown.searchFun()"
      />
    </div>
    <div class="pieChartRadius">
      <!-- 环形图组件 -->
      <div id="main" ref="main" class="echartsStyle"></div>
      <!-- 柱状统计图 -->
      <div id="Histogram" ref="Histogram" class="HistogramStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "pieChartRadius",
  data() {
    return {
      picDtada: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
        { value: 1048, name: "Search Engine1" },
        { value: 735, name: "Direct1" },
        { value: 580, name: "Email1" },
        { value: 484, name: "Union Ads1" },
        { value: 300, name: "Video Ads1" },
        { value: 1048, name: "Search Engine2" },
        { value: 735, name: "Direct2" },
      ],
      startTime: "",
      endTime: "",
    };
  },
  computed: {},
  filters: {},
  watch: {},
  created() {},
  mounted() {
    this.dataProcessing();
    this.getHistogram();
  },
  watch: {
    timeValue(val) {
      this.startTime = this.timeValue ? this.timeValue[0] : null;
      this.endTime = this.timeValue ? this.timeValue[1] : null;
    },
  },
  methods: {
    clickMonth() {},
    clickSixMonths() {},
    // 日期时间
    dataProcessing() {
      let that = this;
      //设置控制图表大小变量
      let setEchartWH = {
        width: "94.5%",
      };
      //先获取Dom上的实例
      let mainMyChart = that.$echarts.getInstanceByDom(
        document.getElementById("main")
      );
      //然后判断实例是否存在，如果不存在，就创建新实例
      if (mainMyChart == null) {
        mainMyChart = that.$echarts.init(
          document.getElementById("main"),
          setEchartWH
        );
      }
      // 图表自适应
      setTimeout(function () {
        window.addEventListener(
          "resize",
          () => {
            mainMyChart.resize();
          },
          false
        ); // false代表事件句柄在冒泡阶段执行
      }, 200);

      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "55%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.picDtada,
            // 设置响应式
            responsive: true,
          },
        ],
      };
      option && mainMyChart.setOption(option);
    },
    getHistogram() {
      let that = this;
      //设置控制图表大小变量
      let setEchartWH = {
        width: "94.5%",
      };
      //先获取Dom上的实例
      let mainMyChart = that.$echarts.getInstanceByDom(
        document.getElementById("Histogram")
      );
      //然后判断实例是否存在，如果不存在，就创建新实例
      if (mainMyChart == null) {
        mainMyChart = that.$echarts.init(
          document.getElementById("Histogram"),
          setEchartWH
        );
      }
      // 图表自适应
      setTimeout(function () {
        window.addEventListener(
          "resize",
          () => {
            mainMyChart.resize();
          },
          false
        ); // false代表事件句柄在冒泡阶段执行
      }, 200);

      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      };

      option && mainMyChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  border: 1px solid #eee;
  .title {
    padding: 20px 50px;
  }
  .pieChartRadius {
    display: flex;
    padding: 0 50px;
    .echartsStyle {
      width: 840px;
      height: 600px;
      background: #fff;
      border: 1px solid #eee;
    }
    .HistogramStyle {
      width: 840px;
      height: 600px;
      background: #fff;
      border: 1px solid #eee;
      margin-left: 200px;
    }
  }
}
</style>
 